<template>
	<view>
		<view class="filter-wrapper" style="height: 90upx;">
			<view class=" d-flex border-bottoms border-tops a-center" style="height: 90upx;z-index: 2004;">
				<view
					v-for="(item, index) in dataList"
					:key="index"
					class="filter-wrapper-item"
					:data-type="index"
					:class="[currentIndex == index ? 'taped-color' : '']"
					@tap="showSelect"
				>
					<text class="mr-1">{{ item.type }}</text>
					<view class="iconfont icon-sanjiao"></view>
				</view>
			</view>
			<view id="selectMask" class="mask" @tap="closeMask" :class="[maskVisible ? 'fadeIn' : 'fadeOut', animateVisible ? 'animated-s1' : '', maskShowVisible ? 'none' : '']">
				<view ref="selector" class="list-modal d-flex flex-column" :class="[maskVisible ? 'foldShow' : 'foldHide', animateVisible ? 'animated-s1' : '']">
					<scroll-view scroll-y="true" style="height: 404upx;">
						<view
							class="list-modal-item d-flex j-sb a-center border-bottom"
							v-for="(item1, index1) in dataList[currentIndex].list"
							@tap="selectTarget(index1,item1)"
							:key="index1"
						>
							<text>{{ item1.name }}</text>
							<text v-if="index1 == indexGroup[currentIndex]" class="iconfont icon-duihao taped-color"></text>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentIndex: 0,
			maskVisible: false,
			animateVisible: false,
			maskShowVisible: true, //控制mask遮罩层的display属性，避免遮挡tabBar按钮
			indexGroup: [0,0,0],
			selectedGroup: ['','',''],
		};
	},
	props: {
		dataList: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	onLoad() {
		console.log(1111)
		if (this.dataList.length > 0) {
			this.selectedGroup = this.dataList.map((item) => {
				return item.list[0].val
			})
		}
	},
	onShow() {
		console.log(22222)
	},
	watch: {
		maskVisible(newVal, oldVal) {
			const _this = this;
			if (!newVal) {
				setTimeout(() => {
					_this.maskShowVisible = true;
				}, 500);
			}
		}
	},
	methods: {
		showSelect(e) {
			if (!this.maskVisible) {
				this.maskShowVisible = false;
			}
			this.animateVisible = true; //添加CSS动画控制
			const tapNode = e.currentTarget;
			let tapIndex = tapNode.dataset.type;
			if (tapIndex === this.currentIndex) {
				this.maskVisible = !this.maskVisible;
			} else {
				if (!this.maskVisible) {
					this.maskVisible = true;
				}
				this.currentIndex = tapIndex;
			}
		},
		selectTarget(idx,obj) {
			// this.dataList[this.currentIndex].init = idx;
			// var dataSet = this.dataList[this.currentIndex];
			// dataSet.init = idx;
			// this.$set(this.dataList, this.currentIndex, dataSet);
			this.selectedGroup[this.currentIndex] = obj.value;
			console.log(this.selectedGroup)
			this.$set(this.indexGroup,this.currentIndex, idx);
			this.maskVisible = false;
			this.$emit('handleOnSwitch',this.selectedGroup);
		},
		closeMask(e){
			const maskNode = e.target;
			if(maskNode.id === 'selectMask'){
				this.maskVisible = false;
			}
		}
	}
};
</script>

<style scoped>
.filter-wrapper .filter-wrapper-item {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
	position: relative;
	font-weight: bold;
}
.list-modal {
	width: 690upx;
	height: 404upx;
	border-radius: 0 0 20upx 20upx;
	background: white;
	padding: 0 30upx;
	transform: translateY(-100%);
}
.list-modal-item {
	height: 80upx;
}
.mask {
	/* position: fixed;
	z-index: 2001;
	left: 0;
	top: 748upx;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	overflow: hidden;
	opacity: 0; */
	position: absolute;
	 z-index: 2001;
	 left: 0;
	 width: 100%;
	 height: calc(100% - 600upx);
	 background-color: rgba(0, 0, 0, 0.5);
	 overflow: hidden;
	 opacity: 0;
}
.taped-color {
	color: #005BAC;
}
.none {
	display: none;
}
@keyframes foldShow {
	from {
		transform: translate3d(0, -100%, 0);
		-webkit-transform: translate3d(0, -100%, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
	}
}
.foldShow {
	animation-name: foldShow;
	-webkit-animation-name: foldShow;
}

@keyframes foldHide {
	from {
		transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(0, -100%, 0);
		-webkit-transform: translate3d(0, -100%, 0);
	}
}

.foldHide {
	animation-name: foldHide;
	-webkit-animation-name: foldHide;
}
</style>
